11tyでJavaScriptを使わずにリダイレクト

2022-10-14

#eleventy #html

目次

概要

このブログは 11ty で運用しています。

すべてを集約したい要望はないものの、他の媒体も含めてポスト一覧で時系列に並ぶと個人的にうれしいので対応しました。
下記が実現できればなんでもよかったので、HTMLだけでリダイレクトしたいポストに対応する layouts を作成することにしました。

指定したURLへの自動遷移
URL正規化 (canonical)
検索インデックス登録拒否 (noindex)
自動遷移が失敗したときの導線

実装

テンプレートの実装はシンプルです。

---
layout: layouts/post.njk
---

<head>
  <link rel="canonical" href="{{ redirect.to | url }}" />
  <meta http-equiv="refresh" content="0; url={{ redirect.to | url }}" />
  <meta name="robots" content="noindex" />
</head>
<body>
  <h2>Redirecting...</h2>
  <a href="{{ redirect.to | url }}">Please click here if you are not redirected within a few seconds</a>
<body>

テンプレートを利用するときに redirect.to でリダイレクトしたいURLを渡すだけで、生成されたページにアクセスするとリダイレクトされるようになります。

---
title: Post title
tags:
  - redirect
date: 2022-10-14 12:00:00
redirect:
  to: https://example.com/target
layout: layouts/redirect.njk
---

参考

以上。